<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 下载并引入jquery easyUI -->
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="../../js/jquery-easyui-1.9.5/themes/color.css">
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.min.js"></script>
<script type="text/javascript"
	src="../../js/jquery-easyui-1.9.5/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../js/context-menu.js"></script>
</head>
<body>
	<table id="booking_dg" title="预订管理" class="easyui-datagrid"
		style="width: 100%; height: 100%" url="../booking/list"
		toolbar="#booking_toolbar" pagination="true" rownumbers="true"
		fitColumns="true" singleSelect="true" data-options="fit:true">
		<thead>
			<tr>
				<th field="bookingNo" width="50">预订编号</th>
				<th field="bookingDate" width="50">预订日期</th>
				
				<th field="deposit" width="50">定金</th>
				
				<th field="client" formatter="clientFormatter" width="50">客户</th>
				<th field="store" formatter="storeFormatter" width="50">库存</th>
				

			</tr>
		</thead>
	</table>
	<div id="booking_toolbar">
		
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="newBooking()">添加</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-edit" plain="true" onclick="editBooking()">编辑</a> <a
			href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true"
			onclick="destroyBooking()">删除</a>
	</div>


	<!-- 新增和修改对话框开始 -->
	<!-- 修改每个组件的id号，增加模块标志信息 -->
	<div id="booking_dlg" class="easyui-dialog"
		style="width: 400px; height: 280px; padding: 10px 20px" closed="true"
		buttons="#booking_dlg-buttons">
		<div class="ftitle">预订信息</div>
		<form id="booking_fm" enctype="multipart/form-data" method="post">
			<div class="fitem">
				<label>预订日期:</label> <input name="bookingDate"
					class="easyui-datebox" data-options="required:true">
			</div>
			<div class="fitem">
				<label>定金:</label> <input name="deposit"
					class="easyui-textbox">
			</div>
			<div class="fitem">
				<label>客户:</label> <input id="clientNo" name="client.clientNo"
					class="easyui-combobox"
					data-options="valueField:'clientNo',textField:'client',url:'../booking/clientList'"
					required="true">
			</div>
			<div class="fitem">
				<label>库存:</label> <input id="storeNo"
					name="store.storeNo" class="easyui-combobox"
					data-options="valueField:'storeNo',textField:'carBrand',url:'../booking/storeList'"
					required="true">
			</div>
			

			
		</form>
	</div>
	<div id="booking_dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok"
			onclick="saveBooking()">保存</a> <a href="#" class="easyui-linkbutton"
			iconCls="icon-cancel"
			onclick="javascript:$('#booking_dlg').dialog('close')">取消</a>
	</div>

	<!-- 新增和修改对话框结束-->
	<script type="text/javascript">
		function clientFormatter(value, row, index) {
			return value.client;
		}
		function storeFormatter(value, row, index) {
			return value.carBrand;
		}
		
		
		//点击数据表上的新增按钮，会调用这个方法
		function newBooking() {
			//打开新增对话框
			$('#booking_dlg').dialog('open').dialog('setTitle', '新增预订信息');
			//新增对话框包含了一个form表单，可能存在多次打开，这里对表单进行清空操作
			$('#booking_fm').form('clear');                                     
			//设置新增数据时提交到服务器的url地址
			url = '../booking/add';
			//新增数据，默认选择商品类型和供应商的第一条数据
			loadClientSuccess();
			loadStoreSuccess();
		}
		function loadClientSuccess(value) {
			$("#clientNo").combobox(
					{
						onLoadSuccess : function(data) {
							if (data) {
								if (value) {
									$("clientNo").combobox('select', value);
								} else {
									$("clientNo").combobox('select',
											data[0].clientNo);
								}
							}
						}
					});
		}
		function loadStoreSuccess(value) {
			$("storeNo").combobox(
					{
						onLoadSuccess : function(data) {
							if (data) {
								if (value) {
									$("storeNo").combobox('select', value);
								} else {
									$("storeNo").combobox('select',
											data[0].storeNo);
								}
							}
						}
					});
		}
		function editBooking() {
			var row = $('#booking_dg').datagrid('getSelected');
			if (row) {
				$('#booking_dlg').dialog('open').dialog('setTitle', '编辑预订信息');
				$('#booking_fm').form('load', row);
				url = '../booking/edit?bookingNo=' + row.bookingNo;
				loadBookingTypeSuccess(row.client.clientNo);
				loadProviderSuccess(row.store.storeNo);
			} else {
				$.messager.show({
					title : 'Error',
					msg : "请选择要修改的预订信息"
				});
			}
		}

		function saveBooking() {
			$('#booking_fm').form('submit', {
				url : url,
				onSubmit : function() {
					return $(this).form('validate');//提交表单前先进行表单数据验证，验证通过才提交数据到服务器；验证失败不提交数据
				},
				success : function(result) {//收到服务器响应的json字符串后，调用这里的代码  -- 回调函数，当浏览器收到服务器返回的数据后才执行
					var result = eval('(' + result + ')');
					if (!result.success) {
						//新增失败，使用消息框提示错误信息
						$.messager.show({
							title : 'Error',
							msg : result.errorMsg
						});
					} else {
						$('#booking_dlg').dialog('close'); // 新增成功，关闭新增对话框
						$('#booking_dg').datagrid('reload'); // 新增成功，刷新列表数据
					}
				}
			});
		}

		function destroyBooking() {
			var row = $('#booking_dg').datagrid('getSelected');
			if (row) {
				$.messager.confirm('Confirm', '确定删除?误删今晚加班!', function(r) {
					if (r) {
						$.post('../booking/delete', {
							bookingNo : row.bookingNo
						}, function(result) {
							if (result.success) {
								$('#booking_dg').datagrid('reload'); // reload the user data
							} else {
								$.messager.show({ // show error message
									title : 'Error',
									msg : result.errorMsg
								});
							}
						}, 'json');
					}
				});
			}
		}
	</script>

</body>
</html>



